<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js菜单导航</title>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
		<style>
			#main{
				text-align: center;
				color: #5e5b64;
        	}
			#main nav{
				background-color:#5597b4;
				display: inline-block;
				margin: 60px auto 45px;
			}
			a{
				text-decoration: none;
				padding: 18px 30px;
				font-size: 16px;
				font-weight: bold;
				color: #fff;
				display: inline-block;
				line-height: 1;
				text-transform: uppercase;
			}
			/* nav.home��ʾ<nav class="home"> */
			nav.home .home,
			nav.projects .projects,
			nav.services .services,
			nav.contact .contact{
				background-color: #e35885;
			}
			p{
				font-size: 22px;
				font-weight: bold;
				color:#7d9098;
			}
			b{
				color: #fff;
				display: inline-block;
				background-color:#c4d7e0;
				border-radius:2px;
				text-transform:uppercase;
				font-size:18px;
				padding:5px 10px;
			}
		</style>
    </head>
    <body>
    	<div id="main">
			<!-- 激活的菜单样式为 active 类，使用 prevent 修饰符来阻止链接在点击时跳转 -->
			<nav v-bind:class="active" v-on:click.prevent>
				<!-- 点击链接时，会调用 changeActive() 方法，该方法在 Vue 实例中创建，用于改变 active 的值 -->
				<a href="#" class="home" v-on:click="changeActive('home')">Home</a>
				<a href="#" class="projects" v-on:click="changeActive('projects')">Projects</a>
				<a href="#" class="services" v-on:click="changeActive('services')">Services</a>
				<a href="#" class="contact" v-on:click="changeActive('contact')">Contact</a>
			</nav>
			<p>
				您选择了<b>{{active}}</b>菜单
			</p>
		</div>
		<script>
			// 创建一个 Vue 实例
			var vm=new Vue({
				// DOM 元素，挂载视图模型
				el:'#main',
				// 定义属性，并设置初始值
				data:{
					active:'home'
				},
				// 点击菜单使用的函数
				methods:{
					changeActive:function(item){
						// 模型改变，视图会自动更新
						this.active=item;
					}
				}
			})
		</script>
    </body>
</html>